<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计算器</title>
		<style type="text/css">
			input {
				width: 400px;
				/* 宽 */
				text-align: right;
				/* 文字对齐:右对齐 */
			}

			button {
				width: 70px;
				/* 宽 */
				margin: 2px 6px;
				/* 外边距:上下2 左右6 */
			}
		</style>
	</head>
	<body>
		<!-- 输入框:设置只读  关闭缓存功能 -->
		<input type="text" autocomplete="off" class="input" value="0">
		<div class="buttons"></div>

		<script>
			// 初始化页面：生成按钮
			function reset_buttons() {
				// 获取标签
				var buttons = document.querySelector(".buttons") //{}
				// 设置按钮的字符---数组
				var keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, ".", "=", "+", "-", "*", "/", "AC", "sin", "cos", "tan", "asin", "acos",
					"atan", "ln"
				]
				// 循环数组，生成按钮
				// for(var i=0;i<keys.length;i++){}
				for (var i in keys) {
					// buttons.innerHTML = buttons.innerHTML + `<button>${keys[i]}</button>`
					buttons.innerHTML += `<button>${keys[i]}</button>`
					// 实现5个换行：注意 ，这里i是字符串形式
					// "0" 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
					//	1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
					if ((+i + 1) % 5 == 0) {
						buttons.innerHTML += "</br>"
					}
				}
			}
			reset_buttons()
			
			
			
			// 处理计算逻辑
			/* 1、按钮的点击事件---需要使用数组进行循环
				2、判断 数字 
				3、判断是不是 + - * /
				4、判断是不是 .
				5、判断 =
				6、判断 AC 
				7、判断 三角函数
			 */
			// 获取标签（所有的button）
			var btns = document.querySelectorAll("button") //[{},{},{}] 获取所有的按钮
			var input = document.querySelector(".input") //获取输入框标签
			var a = "0";//表示原始数据
			var b = "0";//表示新数据
			var c = "+"//表示运算符 ，默认为 + 
			var d = true;
			// 通过循环 给所有的按钮 添加点击事件
			for(var i in btns){
				btns[i].onclick = function(){
					var inner = this.innerHTML; // 获取按钮的内容
					// 判断内容：如果是数字键
					if(inner==0||inner==1||inner==2||inner==3||inner==4||inner==5||inner==6||inner==7||inner==8||inner==9){
						if(b=="0"){
							b=inner //b为0 ，直接赋值
						}else{
							b += inner; //b 不为0 进行拼接  "123"
						}
						input.value = b; //将新输入的数据 显示在输入框中
						d = true;
					}else if(inner=="."){
						// 判断b中有没有 . ,没有就加上
						if(b.indexOf(".") == -1){
							b += inner
						}
						input.value = b;
					}else if(inner=="+"||inner=="-"||inner=="*"||inner=="/"){
						// 存储即算符 ---将b中的数据存储为旧值a ----- b自己变为"0"
						c=inner;
						// a = b;  // 这句代码与 = 计算冲突，替换为下一句
						a = input.value; 
						b="0";
					}else if(inner=="="){
						if(d==true){
							var res = eval(a+c+b)
							input.value = res
							a = res;
							b = "0"
							d = false;
						}
					}else if(inner=="AC"){
						a = "0";
						b = "0";
						c = "+"; 
						input.value = 0
					}else if(inner == "sin"){
						input.value = Math.sin(input.value)
						a = Math.sin(input.value);
						d = false;
					}
					else if(inner == "cos"){
						input.value = Math.cos(input.value)
						a = Math.cos(input.value);
						d = false;
					}else if(inner == "tan"){
						input.value = Math.tan(input.value)
						a = Math.tan(input.value);
						d = false;
					}else if(inner == "asin"){
						input.value = Math.asin(input.value)
						a = Math.asin(input.value);
						d = false;
					}else if(inner == "acos"){
						input.value = Math.acos(input.value)
						a = Math.acos(input.value);
						d = false;
					}else if(inner == "atan"){
						input.value = Math.atan(input.value)
						a = Math.atan(input.value);
						d = false;
					}else if(inner == "ln"){
						input.value = Math.log(input.value)
						a = Math.aln(input.value);
						d = false;
					}
				}
			}
		</script>
	</body>
</html>
